<template>
  <div id="main">
    <button @click="handleClick">{{ flag }}</button>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive } from "vue";
let flag = ref(true);
//模拟接口请求
var p1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("接口请求数据");
  }, 4000);
});
const click = async (func) => {
  //节流防抖
  if (flag.value) {
    flag.value = false;
    setTimeout(() => (flag.value = true), 500);
    return await func;
  }
};
const handleClick = () => {
  //点击请求接口
  click(p1).then((data) => {
    if (data) {
      console.log(data, "+++++111111+++++");
    }
  });
};
</script>
<style>
#main {
  width: 600px;
  height: 400px;
}
button{
  background-color: antiquewhite;
}
</style>
